// JavaScript Document

var dataMonthArray = [9, 15.8, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12, 13.8, 19, 17, 11.7,14, 12, 13.8, 19, 17, 11.7,9,12,13.8,11,10,14,13.9,12,10,10,10,10];
var dataYearArray = [19, 2, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12];

//选中车辆
var carSelect = "";
    //页面侧边栏操作
	$(function(){
		$('#vehi-list').on('click','#vehi-list>li',function(){
			$(this).children('ul').slideDown();//中转站点击下拉展开
			$(this).siblings('li').children('ul').slideUp();//其他展开的同时收起

		});


        //选择车辆，查询车辆数据
        $(document).on('click','.car',function(){
            var carNumber = $(this).attr('name');

            $('.car').css('background-color','#fff');
            $(this).css('background-color','#9cffaa');

            carSelect = carNumber;
            var carstr = "<option>"+carNumber+"</option>";
            $('#scarstring').html(carstr);
            $('#scarstring').attr('name',carNumber);
            //ajax start
            $.ajax({
                type: "POST",
                url: "../car/getCarOutNumberDataInfo",
                dataType : 'json',
                data:{
                    carNumber:carNumber
                },
                success: function(data){
                    dataMonthArray = data.dataMonth;
                    dataMonthArray[33] = 10;
                    dataYearArray = data.dataYear;

                    chat1();
                    chat2();

                }
            });
            //ajax end
        });


		window.onload=function(){
			var rightHeight=$('.span9').height();//获取右边栏大小
			$('.span3').height(rightHeight)//让左边栏等值于右边栏
		}

	});


function chat1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));

    option = {
        backgroundColor:'#fff',
        title: {
            text: '',
            //left:0,
            //top:0,
            //padding:[10,1500,10,50],
            //backgroundColor:'#aed7ad',
        },
        tooltip: {
            trigger: 'axis'
        },
        itemStyle:{
            normal:{
                color:'#00a344',
            }
        },
        xAxis:  {
            //gridIndex:1,
            splitNumber:30,//x轴分割段数
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            boundaryGap: false,
            data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日','31日']
        },
        yAxis: {
            type: 'value',
            splitNumber:8,//Y轴分割段数
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name:'日出车次数',
                type:'line',
                data:dataMonthArray,
                lineStyle:{
                    normal:{
                        width:5,  //连线粗细
                        color: "#00a344"  //连线颜色
                    }
                },

            },

        ]
    };
    myChart1.setOption(option);
}

function chat2() {
    var myChart2 = echarts.init(document.getElementById('main1'));

    var dataAxis = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    var data = [19, 2, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12];
    var yMax = 20;
    var dataShadow = [];

    for (var i = 0; i < dataYearArray.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        backgroundColor:'#fff',
        title: {
            text: '',
            //left:0,
            //top:0,
            //padding:[10,1500,10,50],
            //backgroundColor:'#aed7ad',
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                show: false
            },
            splitNumber:31,//Y轴分割段数
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitNumber:10,//Y轴分割段数
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            itemWidth:100,
            itemHeight:30,
            orient: 'horizontal',
            left: 'right',
            data: ['月度','年度']
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                type: 'bar',
                barWidth: 10,//固定柱子宽度

                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#9e9e9e'
                            }
                        },
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    }
                },
                label: {//柱状体顶端 显示文字
                    normal: {
                        show: true,
                        position: 'top'
                    },
                },
                data: dataYearArray
            }

        ]
    };

    myChart2.setOption(option);// 使用刚指定的配置项和数据显示图表
}






